import classnames from 'classnames';
import React, { ReactNode, useContext } from 'react';
import { ConfigContext } from '../configProvider';
import './index.less';

interface CardProps {
  children?: ReactNode;
  className?: string;
  style?: object;
  direction?: 'vertical' | 'horizontal';
  size?: 'small' | 'middle' | 'large';
}

export default function Button(props: CardProps) {
  const {
    className,
    style,
    children,
    direction = 'horizontal',
    size = 'small',
  } = props;

  const { prefix } = useContext(ConfigContext);
  const spacePrefix = prefix + '-space';
  const allClasses = classnames(
    spacePrefix,
    {
      [`${spacePrefix}-direction-horizontal`]: direction === 'horizontal',
      [`${spacePrefix}-direction-vertical`]: direction === 'vertical',
      [`${spacePrefix}-size-gap-col-small`]: size === 'small' && 'horizontal',
      [`${spacePrefix}-size-gap-col-middle`]: size === 'middle' && 'horizontal',
      [`${spacePrefix}-size-gap-col-large`]: size === 'large' && 'horizontal',
      [`${spacePrefix}-size-gap-row-small`]: size === 'small' && 'vertical',
      [`${spacePrefix}-size-gap-row-middle`]: size === 'middle' && 'vertical',
      [`${spacePrefix}-size-gap-row-large`]: size === 'large' && 'vertical',
    },
    className,
  );

  return (
    <div className={allClasses} style={style}>
      {children}
    </div>
  );
}
